<template>
  <f7-page>
    <f7-navbar title="分享中心" back-link="返回">
      <f7-nav-right>
        <f7-link href="/my-team/">我的团队</f7-link>
      </f7-nav-right>
    </f7-navbar>

    <div class="code-box">
      <img :src="$store.getters.userInfo.user.qr_code" alt="">
      <p class="main-font-color" @click="doCopy($store.getters.userInfo.user.invit_code)">点击复制邀请码：{{$store.getters.userInfo.user.invit_code}}</p>
    </div>
    <div class="register-invite-link">
      <div @click="doCopy($store.getters.userInfo.user.link)">
        <p>点击复制注册链接地址：</p>
        <p>{{$store.getters.userInfo.user.link}}</p>
      </div>
    </div>
  </f7-page>
</template>

<script>
  export default {
    name: "share-center",
    methods: {
      doCopy: function (text) {
        this.$copyText(text).then((e) => {
          this.$toast.success('复制成功')
          console.log(e)
        }, function (e) {
          this.$toast.fail('复制失败')
          console.log(e)
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .code-box {
    text-align: center;
    padding-top: 250px;
    img {
      width: 300px;
    }
    p {
      padding: 40px 0 180px;
      font-size: 24px;
    }
  }
  .register-invite-link {
    padding: 0 88px 40px;
    > div {
      padding: 45px 0;
      @extend .main-linear-bg;
      text-align: center;
      border-radius: $radius;
      font-size: 24px;
      color: $fontColor;
    }
  }
</style>